<!-- 实现微信服务号自动回复功能
1.被关注回复、收到消息回复、关键字回复三种自动回复类型。
2.回复内容支持文本、图片、语音、视频、文件、链接, 图文等。

数据库设计如下：
id 主键自增
replyType 自动回复类型 1.被关注回复 2.收到消息回复 3.关键字回复
replyContent 回复内容 文本、图片、语音、视频、文件、链接, 图文等
replyContentType 回复内容类型 1.文本 2.图片 3.语音 4.视频 5.音乐 6.图文
replyState 回复状态 1.启用 0.禁用
ctime 创建时间
utime 更新时间
dtime 删除时间 -->
<template>
  <div class="wechat-auto-reply-container">
    <div class="page-header">
      <h2>微信服务号自动回复设置</h2>
      <!-- <div class="header-actions">
        <el-button type="primary" @click="handleSave">保存设置</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div> -->
    </div>

    <el-card class="reply-config-card">
      <div class="reply-type-tabs">
        <el-tabs v-model="activeTab" @tab-change="handleTabChange">
          <el-tab-pane label="被关注回复" name="1">
            <Follow></Follow>
          </el-tab-pane>

          <el-tab-pane label="收到消息回复" name="2">

          </el-tab-pane>

          <el-tab-pane label="关键字回复" name="3">
  
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import Keyword from './Keyword.vue';
import Follow from './Follow .vue';
import Default from './Default.vue';


// 活动标签页
const activeTab = ref('1');

</script>

<style scoped lang="scss">
.wechat-auto-reply-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.reply-config-card {
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.reply-type-tabs {
  padding: 20px;
}

.reply-type-content {
  margin-top: 20px;
}

</style>